<template>
<!--    <h1>{{data1}}}</h1>-->
    <h1 v-if="!data.isShow">正在加载数据,请稍后</h1>
    <div v-if="data.isShow">
        <el-table :data="data.resData[0]"
                  style="width: 100%"
                  :row-style="tableRowClassName"
                  class="mytable"
        >
            <el-table-column prop="name" label="名称" width="180" />
            <el-table-column prop="item_type" label="种类" width="180" />
            <el-table-column prop="rank_type" label="等级" />
            <el-table-column prop="time" label="获取时间" />
        </el-table>
        <el-button type="primary" round class="myBtn" @click="analData">点击查询抽卡分析报告</el-button>
        <el-pagination layout="prev, pager, next" :total="totalPages" @current-change="getPageData" />
    </div>

</template>

<script>
    import {reactive,onBeforeUpdate,ref,onMounted,nextTick} from "vue";
    import {useStore} from 'vuex'
    import anal from '@/utils/analyse'
    import getData from "@/api/getData";
    import { ElMessage, ElMessageBox } from 'element-plus'
    import {useRoute}from 'vue-router'
    import { Action } from 'element-plus'
    export default {
        name: "MainIndex",
        setup(){
            const store = useStore()

            // url网址
            let yuanshen_url =  store.state.yuanshen_url
            let pageObj = reactive({pageData:[]})
            let count = 1
            let firstArr = reactive({})
            let dataCopy = reactive({resData:[]})
            let totalPages = ref(1)
            let data = reactive({resData:[],isShow:false})
            // 定义一个数据用于记录最后一个数据的id
            getData.getAllData(data,yuanshen_url).then(res=>{

                // 初始化分页器
                if(res.length>0){
                    // 分页显示
                    totalPages.value = res.length*10
                    firstArr.first = res[0]
                }
                data.isShow = true
                dataCopy.resData = [...data.resData]
                console.log("dataCopy.resData",dataCopy.resData)
            })
            // 定义表格状态  可以根据人物星级改变表格行颜色
            const tableRowClassName = ({ row, rowIndex})=>{

                // 如果是四星 就变成紫色
                if(row.rank_type==="4"){
                    return 'backgroundColor:#40256D;'
                }else if(row.rank_type==="5"){
                    return 'backgroundColor:#FFBA56;'
                }

            }

            function getPageData(index) {
                data.resData[0] =  dataCopy.resData[--index]
                console.log("dataCopy.resData==",dataCopy.resData)
                // // 将数组的第一个元素和第index-1个元素交换
                // console.log(index,firstArr)
                // // debugger
                // if(index>1){
                //     let temp = data.resData[0]
                //     data.resData[0] = data.resData[index-1]
                //     data.resData[index-1] = temp
                // }else{
                //     data.resData[0] = firstArr.first
                // }
            }
            function analData() {

                // console.log("报告为:",anal.getAn(dataCopy.resData))
                let yuanshen_count = anal.getAn(dataCopy.resData)
                // 剩余保底
                let surplus = 90-Number(yuanshen_count)
                // 所用原石
                let yaunshi = surplus*160
                ElMessageBox.alert(`分析报告为:您当前已经抽取了${yuanshen_count},再抽${surplus}可以保底。保底所用原石为${yaunshi}`,'分析结果',{
                    confirmButtonText: '确认',
                    callback:()=>{
                        ElMessage({
                            type: 'info',
                            message: `确认成功`,
                        })
                    }
                })
            }
            // pageObj.pageData = data.resData[0]
            return {
                data:data,
                tableRowClassName,
                totalPages,
                getPageData,
                analData
            }
        },
    }
</script>

<style scoped>
    .mytable{
        background-color: rgba(0,0,0,0.5);
    }
</style>